<template>
  <view class="container">
    <!-- 搜索框 -->
    <u-search v-model="searchKeyword" placeholder="请输入门店名称" @confirm="searchStore" />

    <!-- 排序按钮 -->
    <view class="sort-buttons">
      <view
        class="sort-button"
        v-for="(option, index) in sortOptions"
        :key="index"
        :class="{ active: selectedSortIndex === index }"
        @click="toggleSort(index)"
      >
        <text>{{ option.label }}</text>
        <text class="icon-arrow">
          <text :class="['arrow', 'up', getSortClass(index, 'asc')]">▲</text>
          <text :class="['arrow', 'down', getSortClass(index, 'desc')]">▼</text>
        </text>
      </view>
    </view>

    <!-- 门店列表 -->
    <view
      class="store-list"
      scroll-y
      :lower-threshold="50"
      enable-back-to-top
      enable-pull-down-refresh
      @scrolltolower="onReachBottom"
    >
      <view
        class="store-card"
        v-for="store in storeList"
        :key="store.id"
      >
        <view class="card-content" @click="goToStoreDetail(store.id)">
          <image
            class="store-thumb"
            :src="store.image"
            mode="aspectFill"
          />
          <view class="store-details">
            <view class="header">
              <text class="store-name">{{ store.name }}</text>
              <u-rate v-model="store.rating" :max="5" readonly size="14" />
            </view>
            <view class="row">
              <text class="store-distance">距离: {{ store.distance }}km</text>
              <text class="store-served">服务人数: {{ store.servedCount }}人</text>
            </view>
            <text class="store-address">{{ store.address }}</text>
          </view>
        </view>
      </view>
      <u-loadmore v-if="loading" :status="loadingStatus" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      selectedSortIndex: 0,
      sortOrder: 'asc',
      sortOptions: [
        { label: '距离', key: 'distance' },
        { label: '好评数', key: 'rating' },
        { label: '服务次数', key: 'servedCount' }
      ],
      storeList: [],
      loading: false,
      loadingStatus: 'more',
      page: 1,
      pageSize: 10,
      allStoreData: []
    };
  },
  methods: {
    fetchStoreList() {
      if (this.loading || this.loadingStatus === 'nomore') return;
      this.loading = true;

      let filtered = this.allStoreData.filter(store =>
        store.name.toLowerCase().includes(this.searchKeyword.toLowerCase())
      );

      const sortKey = this.sortOptions[this.selectedSortIndex].key;
      const order = this.sortOrder;
      filtered.sort((a, b) => {
        const valA = a[sortKey];
        const valB = b[sortKey];
        return order === 'asc' ? valA - valB : valB - valA;
      });

      const start = (this.page - 1) * this.pageSize;
      const end = this.page * this.pageSize;
      const chunk = filtered.slice(start, end);

      if (chunk.length) {
        this.storeList = this.page === 1 ? chunk : this.storeList.concat(chunk);
        this.page++;
      } else {
        this.loadingStatus = 'nomore';
      }

      this.loading = false;
    },
    toggleSort(index) {
      if (this.selectedSortIndex === index) {
        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
      } else {
        this.selectedSortIndex = index;
        this.sortOrder = 'asc';
      }
      this.page = 1;
      this.storeList = [];
      this.loadingStatus = 'more';
      this.fetchStoreList();
    },
    searchStore() {
      this.page = 1;
      this.storeList = [];
      this.loadingStatus = 'more';
      this.fetchStoreList();
    },
    getSortClass(index, direction) {
      if (this.selectedSortIndex === index && this.sortOrder === direction) {
        return 'active';
      }
      return '';
    },
    goToStoreDetail(storeId) {
      uni.navigateTo({
        url: `/pages/packageA/yuyue/storeDetail?id=${storeId}`
      });
    },
    // 触底加载更多
    onReachBottom() {
      console.log('触底加载...');
      this.fetchStoreList();
    }
  },
  onLoad() {
    this.allStoreData = [
      { id: 1, name: '门店 A', address: '地址 A', image: 'https://jz.api.alipay168.cn/static/image/default_image.png', rating: 4.5, distance: 1.2, servedCount: 50 },
      { id: 2, name: '门店 B', address: '地址 B', image: 'https://jz.api.alipay168.cn/static/image/default_image.png', rating: 4.0, distance: 2.3, servedCount: 30 },
      { id: 3, name: '门店 C', address: '地址 C', image: 'https://jz.api.alipay168.cn/static/image/default_image.png', rating: 3.5, distance: 3.1, servedCount: 20 },
      { id: 4, name: '门店 D', address: '地址 D', image: 'https://jz.api.alipay168.cn/static/image/default_image.png', rating: 5.0, distance: 0.8, servedCount: 100 },
      { id: 5, name: '门店 E', address: '地址 E', image: 'https://jz.api.alipay168.cn/static/image/default_image.png', rating: 3.0, distance: 4.0, servedCount: 40 },
      { id: 6, name: '门店 F', address: '地址 F', image: 'https://jz.api.alipay168.cn/static/image/default_image.png', rating: 4.2, distance: 1.5, servedCount: 60 },
      { id: 7, name: '门店 G', address: '地址 G', image: 'https://jz.api.alipay168.cn/static/image/default_image.png', rating: 4.8, distance: 2.5, servedCount: 80 },
      { id: 8, name: '门店 H', address: '地址 H', image: 'https://jz.api.alipay168.cn/static/image/default_image.png', rating: 4.1, distance: 1.9, servedCount: 70 },
      { id: 9, name: '门店 I', address: '地址 I', image: 'https://jz.api.alipay168.cn/static/image/default_image.png', rating: 3.8, distance: 3.7, servedCount: 15 },
      { id: 10, name: '门店 J', address: '地址 J', image: 'https://jz.api.alipay168.cn/static/image/default_image.png', rating: 4.3, distance: 2.0, servedCount: 90 }
    ];
    this.fetchStoreList();
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.sort-buttons {
  display: flex;
  justify-content: space-around;
  margin: 10px 0;
}
.sort-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  padding: 5px;
  border-radius: 5px;
}
.sort-button.active {
  background-color: #f0f0f0;
  color: #007aff;
}
.icon-arrow {
  display: flex;
  flex-direction: column;
  font-size: 10px;
  margin-top: 2px;
}
.arrow {
  line-height: 10px;
  color: #ccc;
}
.arrow.active {
  color: #007aff;
}
.store-list {
  height: calc(100vh - 200px);
}
.store-card {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 8px;
  background-color: #fff;
}
.card-content {
  display: flex;
}
.store-thumb {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  margin-right: 10px;
}
.store-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.store-name {
  font-weight: bold;
  font-size: 16px;
}
.row {
  display: flex;
  margin-top: 5px;
}
.row text {
  margin-right: 15px;
  color: #888;
  font-size: 14px;
}
.store-address {
  margin-top: 5px;
  color: #888;
  font-size: 14px;
}
</style>
